<template>
  <view class="care-guide">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#999" />
        <input 
          type="text" 
          v-model="searchKey" 
          placeholder="搜索饲养指南" 
          confirm-type="search"
          @confirm="onSearch"
        />
      </view>
    </view>

    <!-- 指南列表 -->
    <view class="guide-list" v-if="guides.length">
      <view class="guide-card" v-for="(guide, index) in guides" :key="index" @click="viewGuide(guide._id)">
        <image class="cover" :src="guide.cover" mode="aspectFill" />
        <view class="content">
          <text class="title">{{guide.title}}</text>
          <view class="tags">
            <text v-for="(tag, tagIndex) in guide.tags" :key="tagIndex">{{tag}}</text>
          </view>
          <view class="stats">
            <view class="stat-item">
              <uni-icons type="eye" size="12" color="#999" />
              <text>{{guide.views}}</text>
            </view>
            <view class="stat-item">
              <uni-icons type="heart" size="12" color="#999" />
              <text>{{guide.likes}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image src="/static/empty-guide.png" mode="aspectFit" />
      <text>暂无相关指南</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      guides: []
    }
  },
  methods: {
    onSearch() {
      this.loadGuides()
    },
    async loadGuides() {
      try {
        const res = await uniCloud.callFunction({
          name: 'getCareGuides',
          data: {
            searchKey: this.searchKey
          }
        })
        if (res.result.code === 200) {
          this.guides = res.result.data
        }
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    viewGuide(id) {
      uni.navigateTo({
        url: '/pages/guide-detail/guide-detail?id=' + id
      })
    }
  },
  onShow() {
    this.loadGuides()
  }
}
</script>

<style lang="scss">
.care-guide {
  min-height: 100vh;
  background: #f5f5f5;
}

.search-bar {
  background: #fff;
  padding: 20rpx;

  .search-input {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 30rpx;
    padding: 10rpx 20rpx;

    input {
      flex: 1;
      height: 60rpx;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
}

.guide-list {
  padding: 20rpx;

  .guide-card {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .cover {
      width: 100%;
      height: 300rpx;
    }

    .content {
      padding: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
        display: block;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        margin-bottom: 16rpx;

        text {
          font-size: 24rpx;
          color: #5cb85c;
          background: #f6ffed;
          padding: 4rpx 16rpx;
          border-radius: 20rpx;
        }
      }

      .stats {
        display: flex;
        gap: 20rpx;

        .stat-item {
          display: flex;
          align-items: center;
          gap: 4rpx;

          text {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    color: #999;
    font-size: 28rpx;
  }
}
</style> 